// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

.beatmapset-beatmap-picker {
  @padding: 5px;
  @gutter: 2px;
  display: flex;
  flex-wrap: wrap;
  margin: 0 (-@padding + -@gutter) 10px;
  background-color: hsla(var(--hsl-b3), 70%);
  border-radius: @border-radius--large;
  width: fit-content;
  max-width: 100%;

  &__beatmap {
    .own-layer();
    .link-plain();
    .fade-element(100ms);
    padding: (@padding + @gutter);
    width: @beatmap-picker-size;
    height: $width;
    opacity: 0.7;

    &:hover {
      opacity: 1;
    }

    &::before {
      .full-size();
      border-radius: @border-radius--large;
      content: "";
      background-color: hsla(var(--hsl-b6), 0.5);
      width: calc(100% - @gutter);
      height: calc(100% - @gutter);
      top: (@gutter / 2);
      left: (@gutter / 2);
      opacity: 0;
      border: 2px solid;
    }

    &:hover::before {
      opacity: 1;
    }

    &--active {
      opacity: 1;

      &::before {
        opacity: 1;
        background-color: hsla(var(--hsl-b6), 0.5);
      }
    }
  }
}
